<template>
  <div class="main1">
    <a-spin :spinning="loading" tip="loading....">
      <p>相册diy:</p>

      <!-- 场景和动画 -->
      <vuedraggable v-model="data">
        <div class="scenarioDiv" v-for="(item,index) of data" :key="index">
          <a-form-model :ref="'scenarioForm'+index" :model="item">
            <!-- 选择场景 -->
            <a-form-model-item style="margin:0 0;" prop="scenes" :rules="rules.scenes">
              <a-select v-model="item.scenes" placeholder="请选择场景">
                <a-select-option
                  v-for="(scItem,scIndex) of propData.scenes"
                  :key="scIndex"
                  :value="scItem.key"
                  @click="chooseScenes(index,scIndex)"
                >{{scItem.value}}</a-select-option>
                <a-select-option :value="''" @click="cancelChoose(index,'scenes')">取消选择</a-select-option>
              </a-select>
            </a-form-model-item>
            <!-- 场景图 -->
            <div class="scenesMaterial">
              <vuedraggable
                :group="{name: 'scenesMaterial', put: true,pull: 'clone'}"
                :value="data[index].scenesMaterial"
                :sort="false"
                :id="index"
                @start="onStart"
                @end="onEnd"
              >
                <div
                  v-for="(scImgItem,scImgIndex) of item.scenesMaterial"
                  :key="scImgIndex"
                  class="scImg"
                >
                  <img
                    class="scImg"
                    @click="imageToBig(scImgIndex,item,'scenes',index)"
                    :src="scImgItem"
                  />
                  <p
                    v-if="item.scenesMaterialPosi!=undefined&&item.scenesMaterialPosi[0][scImgIndex]!=undefined"
                    style="font-size:1px"
                  >
                    {{`${item.scenesMaterialPosi[0][scImgIndex][0]}*
                    ${item.scenesMaterialPosi[0][scImgIndex][1]}`}}
                  </p>
                </div>
              </vuedraggable>
            </div>
            <!-- 选择动画 -->
            <a-form-model-item style="margin:0 0;" v-if="item.scenes">
              <a-select v-model="item.animation" placeholder="请选择动画（可不选）" prop="animation">
                <a-select-option
                  v-for="(aniItem,aniIndex) of propData.animations"
                  :key="aniIndex"
                  :value="aniItem.key"
                  @click="chooseAnimation(index,aniIndex)"
                >{{aniItem.value}}</a-select-option>
                <a-select-option :value="''" @click="cancelChoose(index,'animation')">取消选择</a-select-option>
              </a-select>
            </a-form-model-item>

            <div class="animationMaterial">
              <div
                class="aniImg"
                v-for="(aniImgItem,aniImgIndex) of item.animationMaterial"
                :key="aniImgIndex"
              >
                <img
                  class="aniImg"
                  @click="imageToBig(aniImgIndex,item,'animation',index)"
                  :src="aniImgItem"
                />
                <p
                  v-if="item.animationMaterialPosi!=undefined&&item.animationMaterialPosi[0][aniImgIndex][0]!=undefined"
                  style="font-size:1px"
                >
                  {{`${item.animationMaterialPosi[0][aniImgIndex][0]}*
                  ${item.animationMaterialPosi[0][aniImgIndex][1]}`}}
                </p>
              </div>
            </div>
          </a-form-model>

          <!-- 删除场景 -->
          <a-icon
            class="delBtn"
            @click="delScenes(index)"
            type="minus-circle"
            :style="{ fontSize: '30px' ,color:'red'}"
          />
        </div>
      </vuedraggable>

      <!-- 新增场景 -->
      <a-button class="addBtn" @click="addScenes">新增</a-button>
      <br />

      <!-- 过场 -->
      <div class="convensionDiv">
        <p style="color:red" v-if="checkData1Value">必须全部有过场或者没有过场</p>
        <a-form-model
          :ref="'convensioForm'+index1"
          :model="data1"
          v-for="(item1,index1) of data1"
          :key="index1"
        >
          <a-form-model-item style="margin:0 0;" prop="convension">
            <a-select v-model="item1.convension" :placeholder="'请选择过场'+(index1+1)">
              <a-select-option
                v-for="(coItem,coIndex) of propData.convensions"
                :key="coIndex"
                :value="coItem.key"
                @click="chooseConvension(index1,coIndex)"
              >{{coItem.value}}</a-select-option>
              <a-select-option :value="''" @click="cancelChoose(index1,'convension')">取消选择</a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 过场图 -->
          <div class="convensionMaterial" v-if="item1.convensionMaterial">
            <div
              class="coImg"
              v-for="(coImgItem,coImgIndex) of item1.convensionMaterial"
              :key="coImgIndex"
            >
              <img
                class="coImg"
                @click="imageToBig(coImgIndex,item1,'convension',index1)"
                :src="coImgItem"
              />
              <p
                v-if="item1.convensionMaterialPosi!=undefined&&item1.convensionMaterialPosi[0][coImgIndex][0]!=undefined"
                style="font-size:1px"
              >
                {{`${item1.convensionMaterialPosi[0][coImgIndex][0]}*
                ${item1.convensionMaterialPosi[0][coImgIndex][1]}`}}
              </p>
            </div>
          </div>
        </a-form-model>
      </div>

      <!-- 预览大图展示  -->
      <a-modal :visible="imageVisible" @ok="save_img" @cancel="cancelImage()">
        <a-spin :spinning="loadingImage" tip="loading....">
          <img style="width:200px" :src="imageBig" /><br>
          <input
            @change="add_img"
            type="file"
            ref="upload1"
            style="width:75px;"
            accept="image/png, image/jpeg, image/jpg, image/gif"
          />
          <p>{{imageBig.split('/')[`${imageBig.split('/').length-1}`]}}</p>
        </a-spin>
      </a-modal>

      <a-button type="primary" @click="onSubmit">提交</a-button>
    </a-spin>
  </div>
</template>

<script>
// import MyUploadAdapter from "@/utils/upload.js";
import { postLocalImage } from "@/api/local.js";
import Vue from "vue";
import vuedraggable from "vuedraggable";

const testData = {
  scenes: [
    {
      key: "heh",
      value: "hehe",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    },
    {
      key: "heh1",
      value: "hehe1",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    },
    {
      key: "heh2",
      value: "hehe2",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    }
  ],
  animations: [
    {
      key: "haha",
      value: "haha",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    },
    {
      key: "haha1",
      value: "haha1",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    },
    {
      key: "haha2",
      value: "haha2",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    }
  ],
  convensions: [
    {
      key: "heihei",
      value: "heihei",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    },
    {
      key: "heihei1",
      value: "heihei1",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    },
    {
      key: "heihei2",
      value: "heihei2",
      material: [
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/shareBgImage.jpg",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/avatar.png",
        "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/qrcode.png"
      ]
    }
  ]
};

export default {
  name: "diy",
  components: {
    vuedraggable
  },
  props: {
    propData: {}
  },
  data() {
    return {
      loading: false,
      loadingImage: false,
      checkData1Value: false,
      imageBig: "", //需要放大的图片
      imageVisible: false, //预览
      positionImage: [], //定位当前上传图片
      imageBigPosi: [],
      testData, //test数据
      rules: {
        scenes: [
          {
            required: true,
            message: "未选择",
            trigger: "blur"
          }
        ]
      }, //校验规则
      data: [{}], //场景数据+动画数据
      data1: [{}] //过场动画
    };
  },

  watch: {},
  methods: {
    //拖动场景图并替换
    onEnd(e) {
      var img = JSON.parse(
        JSON.stringify(this.data[e.from.id].scenesMaterial[e.oldDraggableIndex])
      );
      this.data[e.to.id].scenesMaterial.splice(e.newDraggableIndex, 1, img);
      console.log(this.data);
      this.endResponse();
    },
    endResponse() {
      this.data.push({});
      this.data.splice(this.data.length - 1, 1);
      console.log(this.data);
    },
    //保存添加的图片
    save_img() {
      var _this = this;
      if (_this.positionImage[2] == "scenes") {
        _this.data[_this.positionImage[0]].scenesMaterial[
          _this.positionImage[1]
        ] = _this.imageBig;
        _this.data[_this.positionImage[0]].scenesMaterialPosi[0][
          _this.positionImage[1]
        ] = JSON.parse(JSON.stringify(_this.imageBigPosi));
      } else if (_this.positionImage[2] == "animation") {
        _this.data[_this.positionImage[0]].animationMaterial[
          _this.positionImage[1]
        ] = _this.imageBig;
        _this.data[_this.positionImage[0]].animationMaterialPosi[0][
          _this.positionImage[1]
        ] = JSON.parse(JSON.stringify(_this.imageBigPosi));
      } else if (_this.positionImage[2] == "convension") {
        _this.data1[_this.positionImage[0]].convensionMaterial[
          _this.positionImage[1]
        ] = _this.imageBig;
        _this.data1[_this.positionImage[0]].convensionMaterialPosi[0][
          _this.positionImage[1]
        ] = JSON.parse(JSON.stringify(_this.imageBigPosi));
      }
      //   console.log(_this.data);
      //   console.log(_this.data1);
      _this.imageVisible = false;
      _this.positionImage = [];
      _this.imageBig = "";
    },
    //取消添加图片
    cancelImage() {
      var _this = this;
      _this.imageVisible = false;
      _this.positionImage = [];
      _this.imageBig = "";
    },
    //上传图片
    upimg(file) {
      var _this = this;
      return new Promise(resolve => {
        // if (!file.type.match("image.*")) {
        //   return false;
        // }
        var reader = new FileReader();
        reader.readAsDataURL(file); // 读取文件
        // var arrIndex = file.name.split(".").length - 1;
        // var imgExit = file.name.split(".")[arrIndex];
        // var rand = _this.getCode();
        var ossKey = file.name.split(".")[0] + "." + file.name.split(".")[1];
        //   rand +
        //   "_" +
        //   _this.positionImage[0] +
        //   _this.positionImage[1] +
        //   "." +
        //   imgExit;
        // console.log(ossKey)
        var imgurl = "http://192.168.0.118:8000/images" + "/" + ossKey;
        reader.onload = function(arg) {
          var data = {
            name: ossKey,
            image: arg.target.result.split(",")[1]
          };
          postLocalImage(data).then(res => {
            _this.$refs.upload1.setAttribute("type", "file");
            console.log(res);
            var img = new Image();
            img.src = imgurl;
            img.onload = function() {
              let data = [];
              data[0] = imgurl;
              data[1] = img.width;
              data[2] = img.height;
              resolve(data);
            };
          });
        };
      });
    },
    //  添加图片
    add_img(event) {
      var _this = this;
      _this.loadingImage = true;
      var file = event.target.files[0];
      if (!(event.target.files[0].size / 1024 / 1024 < 2)) {
        _this.$message.error("图片不允许超过2MB!");
        _this.loadingImage = false;
        return;
      }
      _this.$refs.upload1.setAttribute("type", "text");

      _this.upimg(file).then(res => {
        _this.imageBigPosi[0] = res[1];
        _this.imageBigPosi[1] = res[2];
        _this.imageBig = res[0];
        _this.loadingImage = false;
      });

      // var loader = {};
      // _this.loadingImage = true;
      // loader["file"] = event.target.files[0];
      // // 限制2MB以下
      // if (!(event.target.files[0].size / 1024 / 1024 < 2)) {
      //   _this.$message.error("图片不允许超过2MB!");
      //   return;
      // }
      // new MyUploadAdapter(loader, 1).upload().then(res => {
      //   _this.imageBig = res.default;
      //   _this.loadingImage = false;
      // });
    },
    //提交数据
    dataProcess() {
      var _this = this;
      _this.loading = true;
      var _data1 = JSON.parse(JSON.stringify(_this.data));
      var _data2 = JSON.parse(JSON.stringify(_this.data1));
      let data = {};
      //过场
      data["scene"] = _data1.map(val => {
        return val.scenes;
      });
      var animations = {};
      //动画
      for (let data1sc of _data1) {
        data[data1sc.scenes] = data1sc.scenesMaterial;
        if (data1sc.animation != undefined && data1sc.animation !== "") {
          animations[data1sc.scenes] = {};
          animations[data1sc.scenes][data1sc.animation] =
            data1sc.animationMaterial;
        }
      }
      //验证是否有动画
      if (Object.keys(animations).length !== 0) {
        data["animation"] = animations;
      }
      //过场
      var _conLength = Object.keys(_data2).length;
      var _tsLength = 0;
      for (let con of _data2) {
        if (Object.keys(con).length !== 0 && con.convension != "") {
          _tsLength++;
        }
      }
      if (_conLength == _tsLength && _tsLength !== 0) {
        data["guochang"] = _data2.map(val => {
          return val.convension;
        });
        var guochangImg = [];
        for (let data2co of _data2) {
          for (let m of data2co.convensionMaterial) {
            guochangImg.push(m);
          }
        }
        data["guochangImg"] = JSON.parse(JSON.stringify(guochangImg));
        // if (new Set(data.guochang).size != data.guochang.length) {
        //   _this.$message.error("有过场重复");
        //   _this.loading = false;
        //   return;
        // }
      }

      if (new Set(data.scene).size != data.scene.length) {
        _this.$message.error("有场景重复");
        _this.loading = false;
        return;
      }

      console.log(data);
      _this.loading = false;
      _this.$emit("reloadHandleClick", data);

      //上传服务器
      // var res = new Promise(function (resolve) {
      //     _this.loading = false;
      //     resolve(true);
      // });
      return data;
    },
    //提交
    onSubmit() {
      var _this = this;
      for (let i in _this.data) {
        _this.$refs["scenarioForm" + i][0].validate(valid => {
          if (valid && i == _this.data.length - 1) {
            var _sum = 0;
            var _sum_ = 0;
            var _length = _this.data1.length;
            for (let con of _this.data1) {
              if (con.convension != undefined && con.convension !== "") {
                _sum++;
              } else {
                _sum_++;
              }
            }
            if (_sum == _length || _sum_ == _length) {
              _this.dataProcess().then(res => {
                if (res) {
                  _this.$message.success("提交成功");
                  _this.checkData1Value = false;
                } else {
                  _this.$message.error("提交失败");
                }
              });
            } else {
              _this.$message.error("提交失败,必须全部有过场或者没有过场");
              _this.checkData1Value = true;
              return false;
            }
            // console.log(data)
            // for(let i1 in _this.data1){
            //   _this.$refs["convensioForm"+i1][0].validate(valid1 => {
            //     if(valid1){
            //     }else{
            //       _this.$message.error("提交失败")
            //       return false;
            //     }
            //   })
            // }
          } else if (!valid) {
            _this.$message.error("提交失败，有场景未选择");
            return false;
          }
        });
      }
    },
    //新增
    addScenes() {
      this.data.push({});
      this.data1.push({});
    },
    //删除
    delScenes(index) {
      const _this = this;
      this.$confirm({
        title: `你确定要删除该场景吗？`,
        onOk: () => {
          _this.loading = false;
          // const hide = this.$message.loading("正在删除...", 0);
          this.data.splice(index, 1);
          this.data1.splice(index, 1);

          // delPaper({
          //   paperId: `${paperId}`
          // }).then(res => {
          //   console.log(res);
          //   if (res.code == 200) {
          _this.$message.success("删除成功");
          //     _this.init();
          //   } else {
          //     _this.$message.error(
          //       res.errormsg ? res.errormsg : "删除失败，请重新尝试"
          //     );
          //     _this.loading = false;
          //   }
          // hide();
          // });
        },
        onCancel() {}
      });
    },
    //取消选择
    cancelChoose(index, type) {
      if (type == "scenes") {
        delete this.data[index].scenes;
        delete this.data[index].scenesMaterial;
      } else if (type == "animation") {
        delete this.data[index].animation;
        delete this.data[index].animationMaterial;
      } else if (type == "convension") {
        delete this.data1[index].convension;
        delete this.data1[index].convensionMaterial;
      }
    },
    //选择场景
    chooseScenes(index, scIndex) {
      var _this = this;
      _this.data[index]["scenesMaterial"] = JSON.parse(
        JSON.stringify(_this.propData.scenes[scIndex].material)
      );
      //   console.log(_this.data);
      var scenesMaterialPosi = [];
      var scM = [];
      scM = JSON.parse(JSON.stringify(_this.data[index]["scenesMaterial"]));
      var res = new Promise(function(resolve) {
        for (let scMIndex in scM) {
          let img = new Image();
          img.src = scM[scMIndex];
          img.onload = function() {
            scenesMaterialPosi[scMIndex] = [img.width, img.height];
            // console.log(scenesMaterialPosi[scMIndex],scMIndex)
            if (scMIndex == scM.length - 1) {
              resolve(scenesMaterialPosi);
            }
          };
        }
      });
      Promise.all([res]).then(
        value => {
          Vue.set(_this.data[index], "scenesMaterialPosi", value);
          console.log(_this.data);
        },
        reason => {
          console.log(reason);
        }
      );
    },
    //选择动画
    chooseAnimation(index, aniIndex) {
      var _this = this;
      _this.data[index]["animationMaterial"] = JSON.parse(
        JSON.stringify(_this.propData.animations[aniIndex].material)
      );
      //   console.log(_this.data);
      var animationMaterialPosi = [];
      var ani = [];
      ani = JSON.parse(JSON.stringify(_this.data[index]["animationMaterial"]));
      var res = new Promise(function(resolve) {
        for (let aniIndex in ani) {
          let img = new Image();
          img.src = ani[aniIndex];
          img.onload = function() {
            animationMaterialPosi[aniIndex] = [img.width, img.height];
            // console.log(animationMaterial[aniIndex],aniIndex)
            if (aniIndex == ani.length - 1) {
              console.log(animationMaterialPosi);
              resolve(animationMaterialPosi);
            }
          };
        }
      });
      Promise.all([res]).then(
        value => {
          Vue.set(_this.data[index], "animationMaterialPosi", value);
          console.log(_this.data);
        },
        reason => {
          console.log(reason);
        }
      );
    },
    //选择过场
    chooseConvension(index, coIndex) {
      var _this = this;
      _this.data1[index]["convensionMaterial"] = JSON.parse(
        JSON.stringify(_this.propData.convensions[coIndex].material)
      );
      console.log(_this.data1);
      var convensionMaterialPosi = [];
      var con = [];
      con = JSON.parse(
        JSON.stringify(_this.data1[index]["convensionMaterial"])
      );
      var res = new Promise(function(resolve) {
        for (let conIndex in con) {
          let img = new Image();
          img.src = con[conIndex];
          img.onload = function() {
            convensionMaterialPosi[conIndex] = [img.width, img.height];
            // console.log(convensionMaterialPosi[conIndex],conIndex)
            if (conIndex == con.length - 1) {
              resolve(convensionMaterialPosi);
            }
          };
        }
      });
      Promise.all([res]).then(
        value => {
          Vue.set(_this.data1[index], "convensionMaterialPosi", value);
        },
        reason => {
          console.log(reason);
        }
      );
    },
    //预览
    imageToBig(index, item, type, dataIndex) {
      this.imageVisible = true;
      this.positionImage = [dataIndex, index, type];
      if (type == "scenes") {
        this.imageBig = item.scenesMaterial[index];
      } else if (type == "animation") {
        this.imageBig = item.animationMaterial[index];
      } else if (type == "convension") {
        this.imageBig = item.convensionMaterial[index];
      }
    },
    getRandom(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    },
    getCode() {
      var _this = this;
      let code = "";
      for (var i = 0; i < 6; i++) {
        var type = _this.getRandom(1, 3);
        switch (type) {
          case 1:
            code += String.fromCharCode(_this.getRandom(48, 57)); //数字
            break;
          case 2:
            code += String.fromCharCode(_this.getRandom(65, 90)); //大写字母
            break;
          case 3:
            code += String.fromCharCode(_this.getRandom(97, 122)); //小写字母
            break;
        }
      }
      return code;
    }
  }
};
</script>

<style lang="less" scoped>
.main1 {
  display: inline-block;
  width: 100%;
  height: 100%;

  .scenarioDiv {
    white-space: pre;
    vertical-align: top;
    margin: 10px;
    display: inline-block;
    padding: 10px 10px;
    border: 1px dashed;
    width: 250px;
    height: 300px;
    position: relative;

    .delBtn {
      display: inline-block;
      position: absolute;
      top: -15px;
      right: -15px;
    }

    .scenesMaterial {
      overflow-x: hidden;
      overflow-y: auto;
      display: inline-block;
      white-space: normal;
      width: 230px;
      height: 70px;
      top: 0px;
      left: 0px;

      .scImg {
        // vertical-align: top;
        display: inline-block;
        margin: 1px 2px 1px 0;
        width: 50px;
        height: 30px;
      }
    }

    .animationMaterial {
      overflow-x: hidden;
      overflow-y: auto;
      display: inline-block;
      white-space: normal;
      width: 230px;
      height: 70px;
      top: 0px;
      left: 0px;

      .aniImg {
        // vertical-align: top;
        display: inline-block;
        margin: 1px 2px 1px 0;
        width: 50px;
        height: 30px;
      }
    }
  }

  .addBtn {
    margin: 10px;
    display: inline-block;
    vertical-align: middle;
  }

  .convensionDiv {
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre;
    vertical-align: top;
    margin: 10px;
    display: inline-block;
    padding: 10px 10px;
    border: 1px dashed;
    width: 250px;
    height: 300px;
    position: relative;

    .convensionMaterial {
      overflow-x: hidden;
      overflow-y: auto;
      display: inline-block;
      white-space: normal;
      width: 230px;
      height: 70px;
      top: 0px;
      left: 0px;

      .coImg {
        display: inline-block;
        // vertical-align: top;
        margin: 1px 2px 1px 0;
        width: 50px;
        height: 30px;
      }
    }
  }
}
</style>
